<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 50px auto;
        }
    </style>
    <script>
        $(function () {
            // const $input = $('#input01');
            // const $form = $('#form01');
            const $box = $('.box');

            // 绑定失去焦点的事件
            // $input.blur(function () {
            //     // alert($(this).val());
            // });

            // 绑定submit事件
            // $form.submit(function () {
            //     // alert('提交了');
            //     // 阻止表单提交
            //     return false;
            // });

            // 获取焦点事件
            /*
                focus一般用在让元素起始就获得焦点
            */
             // $input.focus(); // 一般用法
            // $input.focus(function () {
            //     alert('Wharton');
            // })

            // 绑定change事件, 只要发生改变就触发的事件
            // $input.change(function () {
            //     console.log($(this).val());
            // });

            // 鼠标移入移出事件
            // 绑定鼠标移入事件
            $box.mouseover(function () {
                $(this).animate({'margin-top':100})
            });
            // 绑定鼠标移出事件
            $box.mousedown(function () {
                $(this).animate({'margin-top':50})
            });

        })

    </script>
</head>
<body>
<!--    <form id="form01">-->
<!--        <label>用户名</label>-->
<!--        <input type="text" id="input01" name="username">-->
<!--        <input type="submit" value="提交">-->
<!--    </form>-->
    <div class="box"></div>
</body>
</html>